<template>
  <div class="m-page">
    <div class="wrapper wrapper1">
      <div class="bucket-wrapper">
        <div class="bucket">
          <div class="ripple ripple1" :style="{ bottom: rate + '%' }"></div>
          <div class="ripple ripple2" :style="{ bottom: rate + '%' }"></div>
          <div class="ripple ripple3" :style="{ bottom: rate + '%' }"></div>
        </div>
        <div class="mask"></div>
      </div>

      <draggable
        id="first"
        data-source="juju"
        :list="list"
        class="list-group"
        draggable=".item"
        group="a"
        @end="onEnd"
      >
        <div
          class="list-group-item item ball"
          v-for="(element, index) in showList"
          :key="element.name"
          :style="{
            top: element.top + '%',
            left: element.left + '%',
            animationDelay: index + 's'
          }"
        >
          {{ element.name }}
        </div>

        <div
          slot="header"
          class="btn-group list-group-item"
          role="group"
          aria-label="Basic example"
        ></div>
      </draggable>
    </div>

    <div class="wrapper wrapper2">
      <draggable
        :list="list2"
        class="list-group"
        draggable=".item"
        group="a"
        @end="onEnd"
      >
        <div
          class="list-group-item item ball"
          v-for="element in showList2"
          :key="element.name"
          :style="{ top: element.top + '%', left: element.left + '%' }"
        >
          {{ element.name }}
        </div>

        <div
          slot="header"
          class="btn-group list-group-item"
          role="group"
          aria-label="Basic example"
        ></div>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  data() {
    return {
      rate: 10,
      list: [
        { name: 'John 1', id: 0 },
        { name: 'Joao 2', id: 1 },
        { name: 'Jean 3', id: 2 }
      ],
      list2: [
        { name: 'Jonny 4', id: 3 },
        { name: 'Guisepe 5', id: 4 }
      ]
    }
  },
  computed: {
    showList() {
      let arr = []
      for (let i = 0; i < this.list.length; i++) {
        const item = this.list[i]
        arr.push(
          Object.assign({}, item, {
            top: (Math.random() * 100).toFixed(2),
            left: (Math.random() * 100).toFixed(2)
          })
        )
      }
      return arr
    },
    showList2() {
      let arr = []
      for (let i = 0; i < this.list2.length; i++) {
        const item = this.list2[i]
        arr.push(
          Object.assign({}, item, {
            top: (Math.random() * 100).toFixed(2),
            left: (Math.random() * 100).toFixed(2)
          })
        )
      }
      return arr
    }
  },
  components: {
    draggable
  },
  mounted() {
    this.onEnd()
  },
  methods: {
    onEnd() {
      this.rate =
        (this.list.length / (this.list.length + this.list2.length)) * 100
    }
  }
}
</script>

<style lang="stylus" scoped>
$rate = 50%

@keyframes rotate
  0%
    transform: translate(-50%, 0) rotateZ(0deg)
  50%
    transform: translate(-50%, -2%) rotateZ(180deg)
  100%
    transform: translate(-50%, 0%) rotateZ(360deg)

@keyframes float
  0%
    transform: translateY(0)
  33%
    transform: translateY(10px)
  66%
    transform: translateY(-10px)
  100%
    transform: translateY(0)

.bucket-wrapper
  width 100%
  height 100%
  position relative
  background #eee
  .bucket, .mask
    position absolute
    top 0
    left 0
    width 100%
    height 100%
  .mask
    background url('../assets/bg.png') center center / 100% 100% no-repeat
  .bucket
    background-color rgb(118, 218, 255)
    overflow hidden
    .ripple
      position absolute
      left 50%
      bottom $rate
      width 800px
      height 800px
      background #eee
      animation-name rotate
      animation-iteration-count infinite
      animation-timing-function linear
      &.ripple1
        opacity .6
        border-radius 45%
        animation-duration 15s
      &.ripple2
        opacity .8
        border-radius 40%
        animation-duration 18s
      &.ripple3
        opacity .5
        border-radius 37%
        animation-duration 10s

.wrapper
  position absolute
.wrapper1
  left 50%
  top 50px
  width 300px
  height 500px
  background #eee
  #first
    position absolute
    top 0
    left 0
    width 100%
    height 100%
.wrapper2
  left 50px
  top 50px
  width 200px
  height 500px
  background #aaa
.list-group
  width 100%
  height 100%
.ball
  width 100px
  height 100px
  line-height 100px
  text-align center
  background #999
  border-radius 50%
  box-shadow 1px 10px 10px #666
  animation-name float
  animation-duration 2s
  animation-iteration-count infinite
  animation-timing-function linear
</style>
